import { createApp } from 'vue';
import App from './App.vue';
import './styles/index.scss'
import router from './router';
import vue3videoPlay from 'vue3-video-play' // 引入组件
import 'vue3-video-play/dist/style.css' // 引入css
import DataVVue3 from '@kjgl77/datav-vue3';
import pinia from './store';
import {
  renderWithQiankun,
  qiankunWindow
} from 'vite-plugin-qiankun/dist/helper';
import 'normalize.css';

// import 'element-plus/dist/index.css'
// import 'element-plus/theme-chalk/src/message.scss';
// import 'element-plus/theme-chalk/el-message-box.css';
// import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import ElementPlus from 'element-plus';
import echarts from './utils/echarts';
import * as Icons from '@element-plus/icons-vue';
// import HbUI from '@hb/hb-ui-plus';
import 'element-plus/dist/index.css';
// import '@hb/hb-ui-plus/dist/style.css';
//图表的缩放指令
import Directive from '@/directive/index';

//自定义组件
import BiDialog from '@/components/bi-dialog/index';
import BiPagination from '@/components/bi-pagination/index';
import BiDrawer from '@/components/bi-drawer/main';
import { imgSrc } from '@/utils/images';



import JsonViewer from "vue3-json-viewer";
import "vue3-json-viewer/dist/index.css"; // 引入样式


const { VITE_APP_API } = import.meta.env;

// const env = import.meta.env;
export let app;
// 挂载函数
function render(props) {
  app = createApp(App);
  const { container, baseUrl } = props;

  const httpUrl = VITE_APP_API;

  app.component('bi-dialog', BiDialog);
  app.component('bi-drawer', BiDrawer);
  app.component('bi-pagination', BiPagination);
  //便利注册全局icon组件
  Object.keys(Icons).forEach((key) => {
    app.component(key, Icons[key]);
  });

  app.config.globalProperties.$echarts = echarts;
  app.config.globalProperties.$imgSrc = imgSrc;
  app.provide('global', { httpUrl });

  app.use(Directive);
  app.use(router);
  app.use(pinia);
  // app.use(HbUI);
  app.use(vue3videoPlay);
  app.use(ElementPlus, { size: 'default', zIndex: 3000 });
  app.use(DataVVue3);
  app.use(JsonViewer)
  //index.html中div的id名称
  app.mount(container ? container.querySelector('#bi-main') : '#bi-main'); //index.html中div的id名称

  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    props.actions?.onGlobalStateChange((state, prev) => {
      // state: 变更后的状态; prev 变更前的状态
      console.log(state, prev);
    });
    app.config.globalProperties.$props = props;
  }
}

renderWithQiankun({
  mount(props) {
    render(props);
  },
  bootstrap() {
    // console.log('bootstrap');
  },
  unmount(props) {
    const { container, baseUrl } = props;
    app.unmount(container ? container.querySelector('#bi-main') : '#bi-main');
  },
  update() {
    // console.log('update');
  }
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  // console.log('非乾坤d启动来了-----------');
  render({});
}
